<template>
  <div style="margin: 15px" class="pay">
    <el-card>
       <div slot="header">
        <span style="display: flex;align-items: center;font-size: 18px"> 
          <img src="@/assets/img/txjl.png" style="width: 20px;margin-right: 5px">
        平台财务</span>
      </div>
  

      <el-divider></el-divider>
      <!-- 数据展示 -->
      <el-card style="height: 150px; margin-top: 10px;">
        <div style="display: flex; height: 100%;">
          <div class="pay-item">
            <div class="pay-value value-color">
              <span>￥</span>
          {{ CardData.totalAnticipatedTotal||0 }}
            </div>
            <div class="pay-label">总发佣(元)</div>
          </div>
          <div class="pay-item">
            <div class="pay-value">
              <span>￥</span>
           {{ CardData.totalActualTotal||0 }}
            </div>
            <div class="pay-label">总支出(元)</div>
          </div>
          <div class="pay-item">
            <div class="pay-value">
              <span>￥</span>
              {{ CardData.totalBanlanceTotal||0}}
            </div>
            <div class="pay-label">租户余额(元)</div>
          </div>

        
        </div>
      </el-card>
       <el-divider></el-divider>
      <!-- tab-表格 -->
      <div style="margin: 20px 0px">
         <!-- <div class="exportButton">
               <el-button
              icon="el-icon-upload2"
              @click="withdrawExport"
              style="margin-bottom: 10px;background:#F5F5F5"
              >导出</el-button
            >
            </div> -->
       <el-table
          :data="roleList"
        >
          <!-- <el-table-column type="selection" width="55" align="center" /> -->
          <el-table-column label="租户名称" align="center" prop="tenantName" />
          <el-table-column
            label="租户账户"
            prop="tenantNo"
            :show-overflow-tooltip="true"
            align="center"
          />
          <el-table-column
            label="租户手机号"
            prop="tenantPhone"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="租户的总发佣"
            align="center"
            prop="anticipatedTotal"
          />
          <el-table-column
            label="租户的总支出"
            align="center"
            prop="actualTotal"
          >
            <!-- <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.status"
                    active-value="0"
                    inactive-value="1"
                    @change="handleStatusChange(scope.row)"
                  ></el-switch>
                </template> -->
          </el-table-column>
          <el-table-column label="租户余额" align="center" prop="banlanceTotal">
          </el-table-column>
        </el-table>
      </div>
       <!-- <pagination
        style="margin:0px 0px 50px 0px"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      /> -->
    </el-card>
  </div>
</template>

<script>
import {
  cpaTenantFinanceStatistics,
  cpaTenantFinanceList,capTenantFinace1
} from "@/api/finance/index.js";
export default {
  data() {
    return {
      pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        },
      // 切换佣金收入和分润收入
      activeName: "0",
      // ..提现弹窗
      centerDialogVisible: false,
      // ..提现窗口3个数据
      ruleForm: {
        money: "",
        region: "",
        date2: "",
        monetUser: "",
      },
      // ..卡片总数据
      CardData: {
        TotalRevenue: "", //总收入
        CommissionIncome: "", //佣金收入
        ProfitIncome: "", //利润收入
        AccountBalance: "", //账户余额
      },
      rules: {
        money: [{ required: true, message: "请输入提现金额", trigger: "blur" }],
        region: [
          { required: true, message: "请选择提现类型", trigger: "change" },
        ],
        monetUser: [
          { required: true, message: "请选择提现账号", trigger: "blur" },
        ],
      },
      // ..提现账号下拉框数据
      monetUser: [],
      // 用户ID
      userId: 0,

      // 时间
      dateRange: [],
      // tab切换
      // activeName: "first",
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 分页总条数
      total: 0,
      // 收入表格数据
      noticeList: [],
      // 状态数据字典
      typeOptions: [
        {
          dictLabel: "分润",
          dictValue: 0,
        },
        {
          dictLabel: "佣金",
          dictValue: 1,
        },
      ],
      // 查询参数
      queryParams: {
        name: "",
        pageNum: 1,
        pageSize: 10,
        // 收入类型
        amountType: "1",
        // 时间
        // dateRange: "",
      },
      roleList: [],
    };
  },
  mounted() {
    //获取当月初
     var curr_time = new Date();
     var monthDate = new Date(curr_time.getFullYear(), curr_time.getMonth(), 1);
    var ctime = monthDate.getFullYear() + '-' + (monthDate.getMonth() + 1) + "-" + monthDate.getDate();
    this.dateRange[0]=ctime;
    //获取今天日期
    var Today=new Date();
    var riqi=Today.getFullYear()+'-'+(Today.getMonth()+1)+'-'+Today.getDate();
     this.dateRange[1]=riqi;

     console.log(this.dateRange,'0000')
    this.getList();
  },
  methods: {
    handleClick1(tab, event) {
      console.log(tab, event);
    },
    /** 查询角色列表 */
    async getList() {

  
      const userID = sessionStorage.getItem("userID");
      this.userId = userID - 0;

      //获取列表老接口
      // const param = {
      //   beginDate: this.dateRange[0], //创建时间
      //   endDate: this.dateRange[1], //结束时间
      //   tenantName: this.queryParams.name, //租户名称
      //   pageSize: this.queryParams.pageSize,
      //   pageNum: this.queryParams.pageNum,
      // };
      // const data = await cpaTenantFinanceList(param);
      // console.log(data, "数据222222");

      //获取列表新接口
      const data=await capTenantFinace1({tenId:this.userId});
      console.log(data,'列表数据和卡片')
      if(data.code==200){
         this.roleList = data.data.content;
      this.CardData.totalBanlanceTotal=data.data.banlanceTotal;  //租户余额
      this.CardData.totalActualTotal=data.data.actualTotal;  //总支出
      this.CardData.totalAnticipatedTotal=data.data.anticipatedTotal;  //总发佣
      }
     
      // this.total = data.list.length;
  

      // const card = await cpaTenantFinanceStatistics(param);
      this.CardData = card;
      console.log(card, "卡片");
    },


 
   
  


  
  },
};
</script>

<style scoped>

.exportButton{
  /* border: 1px red solid; */
  display: flex;
  justify-content: flex-end;
}
  .el-form-item__label {
    font-weight: 500;
  }
</style>
<style>

  .pay .el-date-editor .el-range-separator {
    width: 15%;
  }

  .pay .el-card__body {
    height: 100%;
  }

  .pay .pay-item {
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .pay .pay-item:not(:last-child) {
    border-right: 1px solid #F0F0F0;
  }

  .pay .pay-item .pay-value {
    font-size: 24px;
    font-weight: bold;
  }

  .pay .pay-item .pay-value span {
    font-size: 10px;
    margin-right: -5px;
  }

  .pay .pay-item .value-color {
    color: #3A77F6;
  }

  .pay .pay-item .pay-label {
    font-size: 11px;
    margin-top: 10px;
  }

  .pay .el-divider--horizontal {
    background: #F0F0F0;
  }

  .pay .el-card__header {
    margin: 0 20px;
    padding-left: 0px;
  }

  .pay .el-tabs__nav-wrap::after {
    height: 0;
  }

</style>
